<template>
  <div class="bacthe">
    <el-tabs>
      <el-form :model="fromitem" label-width="80px">
        <el-form-item label="用户账号">
          <el-input v-model="fromitem.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="fromitem.user" placeholder="请输入昵称"></el-input>
        </el-form-item>
        
        <el-button class="chee" @click="xhimet">搜索</el-button>
        <el-button @click="chegpnd">重置</el-button>
      </el-form>
      <el-table :data="listinfo" style="width: 100%">
        <el-table-column label="用户Id" prop="userId" width="180">
        </el-table-column>
        <el-table-column label="用户昵称" prop="userName"> </el-table-column
        ><el-table-column label="邀请好友数量" prop="shareNumber">
        </el-table-column>
        <el-table-column label="成功交易好友数量" prop="treadSuccessNumber">
        </el-table-column>
        <el-table-column label="积累奖励" prop="totalCommissionAmount"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
          <el-button type="text" @click="chemeng(row)"
            >查看详细</el-button
          >
          </template>
        </el-table-column>
      </el-table>
         <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="2"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    </el-tabs>
  </div>
</template>

<script>
import {userInvite} from '@/api/user'
export default {
  data() {
    return {
      listinfo:[],
      fromitem: {
        name: "",
        user: "",
      },
      q:{
        index:1,
        size:10
      }
    };
  },
  created(){
    this.loacheng()
  },
  methods:{
  async loacheng(){
      const res = await userInvite(this.q)
      this.listinfo = res.data.data
    },
    // 搜索
    xhimet(){
      // id搜索
         let chunts = {};
         if (this.fromitem.name.trim() !== "") {
        chunts = this.listinfo.filter((value) => {
          return value.userId.indexOf(this.fromitem.name) !== -1;
        });
        this.listinfo = chunts;
      }
      // 昵称搜索
         if (this.fromitem.user.trim() !== "") {
        chunts = this.listinfo.filter((value) => {
          return value.userName.indexOf(this.fromitem.user) !== -1;
        });
        this.listinfo = chunts;
      }
    },
    // 重置
    chegpnd(){
      this.q.index = 1
      this.fromitem.name = '',
      this.fromitem.user = ''
      this.loacheng()
    },
    // 查看详细
    chemeng(row){
      this.$router.push({
        path:"/home/withdraw",
        query:{ row }
      })
    },
        // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loacheng();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loacheng();
    },
  }
};
</script>

<style scoped>
.bacthe {
  background-color: #fff;
  padding-left: 20px;
}

/* .el-input {
  margin-right: 20px;
} */
.el-form-item {
  display: inline-block;
  margin-right: 20px;
}
.chee {
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
    border: 1px solid #ff7144;
  color: #fff;
}
</style>
